<template>
	<div class="w-detail w-todonate">
		<div class="w-tabtitle">我要捐赠</div>
		<p>您的每一笔慷慨捐资，都将为山西师范大学的学生培养、教学科研、校园建设等做出贡献。山西师范大学教育发展基金会代表全校的师生，对您对于山西师范大学的关心与支持表示感谢！</p>
		<el-form ref="form" :model="form" label-width="20vw">
			<el-form-item label="我们如何称呼您:">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="您所感兴趣的捐赠项目类型：">
				<el-select v-model="form.type" placeholder="请选择捐赠项目类型">
					<el-option label="区域一" value="shanghai"></el-option>
					<el-option label="区域二" value="beijing"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="您所感兴趣的捐赠项目名称：">
				<el-input v-model="form.proname"></el-input>
			</el-form-item>
			<el-form-item label="我们如何联系您(建议您填写邮箱)：">
				<el-input v-model="form.email" type="email"></el-input>
			</el-form-item>
			<el-form-item label="您的捐赠意愿：">
				<el-input type="textarea" v-model="form.desc" :autosize="{ minRows: 5}"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="onSubmit">提交</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		name:'toDonate',
		props:['fundId'],
		data() {
			return {
				form: {
					name: '',
					type: '',
					proname: '',
					email: '',
					desc: ''
				},
			};
		},
		mounted() {
			console.log("基金id=",this.fundId)
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			resetForm(form) {
				this.form={
					name: '',
					type: '',
					proname: '',
					email: '',
					desc: ''
				}
			}
		}
	};
</script>

<style scoped>
	.w-tabtitle {
		margin-top: 39px;
		margin-bottom: 47px;
		font-size: 30px;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		font-weight: 500;
	}

	.w-todonate p {
		font-weight: 300;
		color: rgba(51, 51, 51, 1);
		font-size: 16px;
		line-height: 1.8;
	}

	.w-todonate .el-form {
		margin-top: 40px;
	}

	.w-todonate .el-input {
		width: 60%;
	}

	.w-todonate .el-select {
		width: 60%;
	}

	.w-todonate .el-textarea {
		width: 70%;
	}
</style>
<style>
	.w-todonate .el-button {
		background: #772A2B;
		color: #fff;
		border: none;
		outline: none;
	}

	.w-todonate .el-textarea .el-textarea__inner {
		min-height: 200px;
	}
	.w-todonate .el-input.is-active .el-input__inner,.w-todonate .el-input__inner:focus {
    border-color: #772A2B;
	}
	.w-todonate .el-select .el-input.is-focus .el-input__inner{
		border-color: #772A2B;
	}
	.w-todonate .el-textarea__inner:focus{
		border-color: #772A2B;
	}
</style>
